<template>
    <view>
        <nut-popup :visible="props.isMyShow" round position="bottom" @click-overlay="diaClose" close-on-click-overlay>
            <view class="costdetail">
                <view class="tabbar">费用明细</view>
                <view class="content costcontent">
                    <h3>合计费用</h3>
                    <h2><span>¥</span>{{ allPay }}</h2>
                    <p v-for="(item, index) in alldatas.costList" :key="index">
                        <span>{{ item.ssopRemark }}</span>
                        <span>¥ {{ item.actualMoney }}</span>
                    </p>
                </view>
            </view>
        </nut-popup>
    </view>
</template>
             
<script lang="ts" setup>
import useOrderStore from '@/store/order';
import { ref } from 'vue';
const props = defineProps<{
    isMyShow: boolean
}>()
const emit = defineEmits(['closeCostModal'])

const orderStore = useOrderStore()
const alldatas = orderStore.orderInfo // 暂时注释
const allPay = ref(0)

// import { data } from '@/pages2/confirmPage/data.js';
// const alldatas = data[0].rows[0]; // 写死的数据


function getAllMoney() {
    alldatas.costList.forEach(item => {
        allPay.value = allPay.value + item.actualMoney
    })
}
getAllMoney()



function diaClose() {
    emit('closeCostModal')
}
</script>
  
<style lang='scss'>
* {
    box-sizing: border-box;
}

.costdetail {
    height: 100%;
    background-color: #fff;
    box-sizing: border-box;

    .tabbar {
        height: 112rpx;
        background-color: #f8f9fa;
        color: #252525;
        font-size: 32rpx;
        font-weight: 600;
        line-height: 112rpx;
        padding-left: 24rpx;
    }

    .content {
        padding: 40rpx 116rpx 0;

        h3,
        h2 {
            text-align: center;
        }

        h3 {
            font-size: 24rpx;
            color: #252525;
            margin: 0;
            font-weight: 400;
        }

        h2 {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 76rpx;
            font-weight: 600;
            color: #0966ff;
            margin: 14rpx 0 20rpx 0;

            span {
                font-size: 40rpx;
                padding-right: 8rpx;
            }
        }

        p {
            display: flex;
            justify-content: space-between;
            color: #666;
            font-size: 24rpx;
            margin: 28rpx 0;

            .van-icon {
                padding-right: 6rpx;
            }
        }

        .first {
            span {
                color: #252525;
                font-weight: 600;
                font-size: 28rpx;

                &:nth-child(2) {
                    font-weight: 400;
                }
            }
        }
    }

    .costcontent {
        margin-bottom: 240rpx;
    }
}
</style>